/*
 * Ext JS Library 2.3.0
 * Copyright(c) 2006-2009, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */
var store;

Ext.onReady(function(){
    var xd = Ext.data;

    store = new Ext.data.JsonStore({
        url: 'ext/get-images.php',
        root: 'images',
        fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}]
    });
    store.load();

    var tpl = new Ext.XTemplate(
		'<tpl for=".">',
            '<div class="thumb-wrap" id="{name}">',
		    '<div class="thumb"><img src="{url}" title="{name}"></div>',
		    '<span class="x-editable">{shortName}</span></div>',
        '</tpl>',
        '<div class="x-clear"></div>'
	);

    var panel = new Ext.Panel({
        id:'images-view',
        frame:true,
        width:730,
		height:419,
        layout:'fit',

        items: new Ext.DataView({
            store: store,
            tpl: tpl,
            autoHeight:true,
            multiSelect: true,
            overClass:'x-view-over',
            itemSelector:'div.thumb-wrap',
            emptyText: 'No images to display',

            prepareData: function(data){
                data.shortName = Ext.util.Format.ellipsis(data.name, 15);
                data.sizeString = Ext.util.Format.fileSize(data.size);
                data.dateString = data.lastmod.format("m/d/Y g:i a");
                return data;
            },
            
            listeners: {
            	selectionchange: {
            		fn: function(dv,nodes){
            			var l = nodes.length;
            			var s = l != 1 ? 's' : '';
						theselectedimage= nodes[0];
						editfile();
            		}
            	}
            }
        }),
		buttons: [{
					id: 'ok-btn',
					text: '上传图片',
					handler: doUpload,
					scope: this
				}]
    });
    panel.render(Ext.get("imageslist"));

});

function doUpload(e){
	var form = new Ext.form.FormPanel({
		baseCls: 'x-plain',
		labelWidth: 70,
		url:'upload.php',
		fileUpload:true,
		defaultType: 'textfield',

		items: [{
			xtype: 'textfield',
			fieldLabel: '文件',
			name: 'userfile',
			inputType: 'file',
			blankText: '请选择gif,jpg,png图片文件.',
			anchor: '90%'  // anchor width by percentage
		}]
	});
	
	var win = new Ext.Window({
		title: '上传图片',
		width: 350,
		height:100,
		minWidth: 350,
		minHeight: 100,
		layout: 'fit',
		resizable:false,
		plain:true,
		modal:true,
		bodyStyle:'padding:5px;',
		buttonAlign:'center',
		items: form,

		buttons: [{
			text: '上传',
			handler: function() {
				if(form.form.isValid()){
					Ext.MessageBox.show({
						   title: "图片上传",
						   msg: '上传中...',
						   progressText: '',
						   width:300,
						   progress:true,
						   closable:false,
						   animEl: 'loding'
					   });
					   form.getForm().submit({    
						success: function(form, action){
						   Ext.Msg.alert('提示',action.result.msg);
						   store.reload();
						   win.hide();  
						},    
					   failure: function(){    
						  Ext.Msg.alert('Error', 'File upload failure.');    
					   }
					})		       
				}
		   }
		},{
			text: '关闭',
			handler:function(){win.hide();}
		}]
	});
	win.show();
}